<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2022-05-20 10:39:08
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-31 17:03:44
-->
<template>
  <div class="dataBoard">
    <div class="title">
      <span>数据看板</span>
      <!-- <span v-if="!disabled"><i class="iconfont icon-shanchu"></i></span> -->
    </div>

    <draggable
      v-model="boardArr"
      chosenClass="active"
      animation="500"
      :disabled="disabled"
      class="board"
    >
      <template v-for="(item, index) in boardArr">
        <div :key="index" class="boadrdetail" v-if="item.hidden !== true">
          <div class="detailTitle">
            <div class="title-left">{{ item.title }}</div>
            <div class="title-left">
              <!-- <span v-if="!disabled">
                <i
                  class="iconfont icon-shanchu"
                  @click.stop="delBoard(item, index)"
                ></i>
              </span> -->
            </div>
          </div>
          <div class="detailData">
            <div class="data">
              {{ item.record }}
            </div>
            <div class="percentage">
              <i
                class="iconfont icon-shangsheng active"
                v-if="item.percentage >= 0"
              >
                {{ item.percentage | positive }}
              </i>
              <i class="iconfont icon-xiajiang active1" v-else>
                {{ item.percentage | negative }}
              </i>
            </div>
          </div>
          <div class="compare" v-if="item.type !== 0">
            <div class="compareDate">
              {{ item.type | compareType }}
            </div>
            <div class="compareData">
              {{ item.contrast }}
            </div>
          </div>
        </div>
      </template>
    </draggable>
  </div>
</template>
<script>
import draggable from "vuedraggable";
import { dataBoard } from "@/api/index";
export default {
  components: {
    draggable,
  },
  props: {
    disabled: {
      type: Boolean,
      required: true,
    },
    briTime: {
      type: Number,
      required: true,
    },
    briUser: {
      type: Number,
      required: true,
    },
    userIds: {
      type: Array,
      required: true,
    },
    timeVal: {
      type: Array,
      required: true,
    },
  },
  watch: {
    briTime(newValue, oldValue) {
      if (newValue !== 0) {
        this.getBoardData();
      }
    },
    briUser(newValue, oldValue) {
      if (newValue !== 0) {
        this.getBoardData();
      }
    },
    userIds: {
      deep: true,
      handler(val) {
        if (val.length !== 0) {
          this.getBoardData();
        }
      },
    },
    timeVal: {
      deep: true,
      handler(val) {
        if (val.length !== 0) {
          this.getBoardData();
        }
      },
    },
  },
  filters: {
    negative: function (val) {
      val = Math.abs(val) + "%";
      return val;
    },
    positive: function (val) {
      val = Math.abs(val) + "%";
      return val;
    },
    compareType: function (val) {
      if (val == 1) {
        val = "较上日：";
      } else if (val == 2) {
        val = "较上周：";
      } else if (val == 3) {
        val = "较上月：";
      } else if (val == 4) {
        val = "较上季：";
      } else if (val == 5) {
        val = "较上年：";
      }
      return val;
    },
  },
  data() {
    return {
      boardArr: [
        {
          id: 1,
          title: "新增客户（人）", //标题
          record: 1342, // 具体数据
          percentage: 30,
          type: 1, //日月年
          contrast: 20, //相比于上个周期
        },
        {
          id: 2,
          title: "新增联系人", //标题
          record: 1342, // 具体数据
          percentage: 30, //数据涨幅百分比
          type: 1, //日月年
          contrast: 20, //相比于上个周期
        },
        {
          id: 3,
          title: "新增商机（个）", //标题
          record: 1342, // 具体数据
          percentage: -30,
          type: 1, //日月年
          contrast: 20, //相比于上个周期
        },
        {
          id: 4,
          title: "新建合同", //标题
          record: 1342, // 具体数据
          percentage: 30,
          type: 1, //日月年
          contrast: 20, //相比于上个周期
        },
        {
          id: 5,
          title: "报名人数（人）", //标题
          record: 1342, // 具体数据
          percentage: 30,
          type: 1, //日月年
          contrast: 20, //相比于上个周期
        },
        {
          id: 6,
          title: "收入金额（元）", //标题
          record: 1342, // 具体数据
          percentage: 30,
          type: 1, //日月年
          contrast: 20, //相比于上个周期
        },
        {
          id: 7,
          title: "支出金额（元）", //标题
          record: 1342, // 具体数据
          percentage: 30,
          type: 1, //日月年
          contrast: 20, //相比于上个周期
        },
        {
          id: 8,
          title: "退款金额（元）", //标题
          record: 1342, // 具体数据
          percentage: 30,
          type: 1, //日月年
          contrast: 20, //相比于上个周期
        },
        {
          id: 9,
          title: "新建回款金额（元）", //标题
          record: 1342, // 具体数据
          percentage: 30,
          type: 1, //日月年
          contrast: 20, //相比于上个周期
        },
        {
          id: 10,
          title: "未回款金额（元）", //标题
          record: 1342, // 具体数据
          percentage: 30,
          type: 1, //日月年
          contrast: 20, //相比于上个周期
        },
      ],
    };
  },
  created() {
    this.getBoardData();
  },
  methods: {
    delBoard(item, index) {
      this.boardArr.splice(index, 1);
    },
    getBoardData() {
      dataBoard({
        type: this.briUser,
        timeUnit: this.briTime,
        times: this.timeVal,
        userIds: this.userIds,
      }).then((res) => {
        this.boardArr = res.data;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.dataBoard {
  width: 1192px;
  height: 370px;
  background: #ffffff;
  border-radius: 8px;
  padding: 24px;
  .title {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #2b2b2b;
    display: flex;
    justify-content: space-between;
  }

  .board {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    .boadrdetail {
      width: 216px;
      height: 118px;
      background: #f8f9fb;
      border-radius: 8px;
      padding: 15px;
      margin-right: 10px;
      .detailTitle {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .detailData {
        display: flex;
        align-items: center;
        margin-top: 12px;
        .data {
          font-size: 26px;
          font-family: DINAlternate-Bold, DINAlternate;
          font-weight: bold;
          color: #1f2e4d;
        }
        .percentage {
          margin-left: 14px;
        }
      }
      .compare {
        display: flex;
        align-items: center;
        margin-top: 14px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9aa1af;
      }
    }
  }
  .boadrdetail:nth-child(n + 6) {
    margin-top: 16px;
  }
}
.active {
  font-size: 12px !important;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #3ccea8;
  margin-left: 12px;
}
.active1 {
  font-size: 12px !important;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #f04d4c;
  margin-left: 12px;
}
</style>